<Tabs
  [animated]="false"
  [useOnPan]="false"
  [swipeable]="false"
  [activeTab]="activeTab"
  [renderTabBar]="TabBarBar"
  [tabDirection]="'horizontal'"
  [tabPanesContent]="tabBarItems"
  [tabBarPosition]="tabBarPosition"
  [prerenderingSiblingsNumber]="prerenderingSiblingsNumber"
></Tabs>

<ng-template #TabBarBar>
  <div class="am-tabs-tab-bar-wrap">
    <div
      class="{{ prefixCls }}-bar"
      [ngClass]="{
        'am-tab-bar-bar-hidden-top': 'top' === tabBarPosition && hidden,
        'am-tab-bar-bar-hidden-bottom': 'bottom' === tabBarPosition && hidden
      }"
      [style.background-color]="barTintColor"
    >
      <div
        class="am-tab-bar-tab"
        *ngFor="let tabBarItem of tabBarItems; let i = index"
        (click)="tabBarTabOnPress({ index: i, key: tabBarItem.key, title: tabBarItem.title })"
      >
        <ng-container [ngTemplateOutlet]="tabBarItem.tabBarTab"></ng-container>
      </div>
    </div>
  </div>
</ng-template>
